<template>
  <div>
    <div
      id="hometop"
      style="height:46px;"
    >
      <div
        class="header"
        style="height:46px;background-color:white;z-index:999"
      >
        <van-nav-bar
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
          fixed
        >
          <template #title>
            <van-icon
              name="search"
              style="padding:0px;margin-left:70px;margin-right:20px;"
              size="22px"
              color="#888"
              @click="searchClick"
            />
            <img
              src="../../static/images/pepole.png"
              alt=""
              width="24px"
              style="border-radius:50px;"
              @click="myselfdataClick"
            >
            <span class='userName'> {{$store.state.name}}</span>
          </template>
          <template #left>
            <img
              src="../../static/images/bilibili.png"
              alt=""
              style="margin-left:-10px;"
            >

          </template>
          <template #right>
            <img
              src="../../static/images/navOpenApp.png"
              alt=""
              width="80px"
              style="margin-left:10px;"
            >
          </template>
        </van-nav-bar>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      active: 0,
      judge: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/home').catch(err => err)
      this.active = 0
      this.$emit('getchild', this.active)
    },
    onClickRight () {
      Toast('按钮')
    },
    searchClick () {
      if (window.sessionStorage.getItem('token')) {
        this.$router.push('/search').catch(err => err)
      } else {
        this.judge = !this.judge
        this.$emit('getjudge', this.judge)
        Toast('请先登录')
      }
    },
    myselfdataClick () {
      if (window.sessionStorage.getItem('token')) {
        this.$router.push('/home/myselfdata').catch(err => err)
      } else {
        this.judge = !this.judge
        this.$emit('getjudge', this.judge)
        Toast('请先登录')
      }
    }
  }
}
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.header {
  position: fixed;
  top: 0;
  background-color: #fff;
  .van-nav-bar__right {
    right: 20px;
    width: 20%;
    padding: 0;
  }
  .userName {
    line-height: 31px;
    display: inline-block;
  }
}
</style>
